/* eslint-disable indent */
/* eslint-disable react/jsx-indent */
import React, { useState, useEffect } from 'react'
import { getArticleList } from '@/api/index'
import { Button, Modal } from 'antd'
import Store from '../../../store/index'
import '../index.scss'
import { withRouter } from 'react-router'
// eslint-disable-next-line react/prefer-stateless-function
interface IProps{
    history?: any;
}
const ArticleList:React.FC<IProps>=(props)=> {
    const [articleList, setArticleList] = useState([])
    const [state, setState]:any = useState({})
    useEffect( () => {
        init()
    }, [])
    const init =async () => {
        const res:any = await getArticleList({
            pageNum: 1,
            pageSize: 10,
            userId: Store.userInfo.userId
        })
        if (res.code === 200) {
            setArticleList(res.rows)
        }
    }
    const delArticle=(item)=> { // 删除文章
        console.log('点击删除')
        setState({
            ...state,
            visible: true
        })
    }
    const editArticle=(item)=> { // 编辑文章
        props.history.push({ pathname: '/publish', state: { article: item }})
        console.log('编辑此文章', props)
    }
    const toDetail=(item)=> { // 跳转文章详情
        props.history.push({ pathname: '/article/detail/' + item.id })
    }
    return (
        <div className='profile'>
            <div className='articleList' >
                {articleList.length ? articleList.map((item:any, index:number) => {
                    return (
                        <div className='list-item' key={index}>
                            <div className='content'>
                                <div className='list-left'><img src={item.imgUrl} alt='' className='list-img' /></div>
                                <div className='list-right'>
                                    <div className='list-title' onClick={() => { toDetail(item) }}>{item.title}</div>
                                    <div className='time'>
                                        {item.createTime}
                                    </div>
                                </div>
                            </div>
                            <div className='operate'>
                                <Button type='text' size='small' className='edit_btn' onClick={editArticle.bind(null, item)}>编辑 </Button>
                                <Button type='text' size='small' danger onClick={delArticle.bind(null, item)}>删除 </Button>
                            </div>
                        </div>
                    )
                })
                    : <div className='no-article'>
                        还没有发布过文章哦
                    </div>
                }
            </div>
            <Modal
              title='文章删除'
              visible={state.visible}
              okText='确认'
              cancelText='取消'
              onCancel={() => { setState({ ...state, visible: false }) }}
            >
                <p>确定删除该文章吗</p>
            </Modal>
        </div >

    )
}
export default withRouter(ArticleList)
